function imgchange(imgs,i,color,inni){
	  var num = 0;
  var imgrool= setInterval(function(){imgRoll()},3000);
	 function imgRoll(){
	 	 num=0;
	 	  if(i<imgs.length-1){
					i++;
				}else{
					i=0;}
	 	 $("#square span").css("background-color",inni);
				var n=i+1;
				$("#square span:nth-child("+n+")").css("background-color",color);
				$("#changeimg").attr("src",imgs[i]);
				$("#changeimg").fadeIn(300,"linear");
			  
				
//				 var num = (i==0?imgs.length:i);
	 }
        $("#square span").mouseover(function(){
             		var m = this.getAttribute("value");
             		i=m;
             		$("#changeimg").attr("src",imgs[i]);
				        $("#changeimg").fadeIn(300,"linear");
                $("#square span").css("background-color",inni);
                $(this).css("background-color",color);
        });

	$("#changeimg").hover(function(){
	          $("#left,#right").css("display","block");
	          clearTimeout(imgrool);
            },function(){$("#left,#right").css("display","none");
              imgrool= setInterval(function(){imgRoll()},3000);
            })
  
  $("#left,#right").hover(function(){
  	 $("#left,#right").css("display","block");
  	 $(this).css("background-color","rgba(126,126,126,0.5)");
  	 clearTimeout(imgrool);
  },function(){$(this).css({"background-color":"rgba(126,126,126,0.3)","display":"none"});imgrool= setInterval(function(){imgRoll()},3000)});

  $("#left").click(function(){
	if(num==0){
		i=i-1;
		num=1;
	}
  	$("#square span").css("background-color","#CCCCCC");
  	  if(i==-1){i=imgs.length-1;}
		   $("#square span:nth-child("+(i+1)+")").css("background-color",color);
	   $("#changeimg").attr("src",imgs[i--]);
	   $("#changeimg").fadeIn(300,"linear");
  });
  
  $("#right").click(function(){
	if(num==1){
		i=i+1;
		num=0;
	}
  	$("#square span").css("background-color","#CCCCCC");
  	  if(i>=imgs.length-1){i=-1;}
	   $("#changeimg").attr("src",imgs[++i]);
	    $("#square span:nth-child("+(i+1)+")").css("background-color",color);
	   $("#changeimg").fadeIn(300,"linear");
	   num=0;
  });
}

function chooseChard(){
	  $("#ul5,#gamepage").on("mouseover",function(){
	  	      $("#blanch header li").css("border-color","lightgrey")
	  	      $("#blanch header li a").css("color","gray")
	  	       $("#blanch dl").css("display","none")
         	 	$("#blanch2").css("display","block");
         	 	$("#gamepage").css({"border-right-color":"red","border-top-color":"red","border-left-color":"red","border-bottom-color":"white"});
         	 	$("#gamepage a").css("color","red");
         	 	$("#chong,#wake").css("border-bottom-color","red");
    });
    $("#ul5").on("mouseover",function(){$("#blanch").animate({top:'215px'},500);});
     $("#ul4,#chong").on("mouseover",function(){
     	$("#blanch header li").css("border-color","lightgrey")
     	$("#blanch header li a").css("color","gray")
     	 $("#blanch dl").css("display","none")
         	 	$("#blanch1").css("display","block");
         	 	$("#chong").css({"border-right-color":"red","border-top-color":"red","border-left-color":"red","border-bottom-color":"white"});
         	 	$("#chong a").css("color","red");
         	 	$("#gamepage,#wake").css("border-bottom-color","red");
    });
    $("#ul4").on("mouseover",function(){$("#blanch").animate({top:'215px'},500);});
    $("#ul6,#wake").on("mouseover",function(){
    	$("#blanch header li").css("border-color","lightgrey")
    	$("#blanch header li a").css("color","gray")
    	 $("#blanch dl").css("display","none")
         	 	$("#blanch3").css("display","block");
         	 	$("#wake").css({"border-right-color":"red","border-top-color":"red","border-left-color":"red","border-bottom-color":"white"});
         	 	$("#wake a").css("color","red");
         	 	$("#gamepage,#chong").css("border-bottom-color","red");
    });
    $("#ul6").on("mouseover",function(){$("#blanch").animate({top:'215px'},500);});
    $("#blanch1 nav li:nth-child(1)").mouseenter(function(){
    	$("#String,#dian").css("display","none");
    	$("#blanch1 nav li a").css("color","gray");
    	$("#phone").css("display","block");
    	$("#blanch1 nav li:nth-child(1) a").css("color","red");
    })
    $("#blanch1 nav li:nth-child(2)").mouseenter(function(){
    	$("#phone,#dian").css("display","none");
    	$("#blanch1 nav li a").css("color","gray");
    	$("#String").css("display","block");
    	$("#blanch1 nav li:nth-child(2) a").css("color","red");
    })
    
    $("#blanch1 nav li:nth-child(3)").mouseenter(function(){
    	$("#phone,#String").css("display","none");
    	$("#blanch1 nav li a").css("color","gray");
    	$("#dian").css("display","block");
    	$("#blanch1 nav li:nth-child(3) a").css("color","red");
    })
    
    $(".smallnav span").click(function(){
    	$("#blanch").animate({top:'410px'},500);
    
    });
    
}

function addDatalist(list){
	console.log(list.length);
	for (var i=0;i<list.length;i++) {
		var total = "";
   for (var t=0;t<list[i].column.length;t++) {
   	 console.log(list[i].column.length);
		 var title = "<dl class='detailitem'><dd>";
		 for (var j=0;j<list[i].column[t].title.length;j++) {
		 	 title+= "<a href='#'>"+list[i].column[t].title[j]+"</a>";
		 }
		 title+="</dd>"
		 var content = "<dt>";
		 for (var k=0;k<list[i].column[t].content.length;k++) {
		  content+="<a href='#'>"+list[i].column[t].content[k]+"</a>";
		 }
		 content+="</dt></dl>";
		 total+=title+content; 
	}
    $("#detaillist").append("<div class='column1'>"+total+"</div>");
 }
	
}

function addnavright(list){
	var total = "";
	for (var i=0;i<list.length;i++) {
		var img = "<dl><dt><img src="+list[i].img+"/></dt>" ;
		var title = "<dd>"+list[i].title1+"</dd><span>"+list[i].title2+"</span></dl>";
		 total+=img+title;
	}
	$("#import").append(total);
}

function navlefthover(){
	 $("#index_nav_left,#detaillist,#import").hover(function(){
	 	              $("#detaillist").css("display","block");
	 	              $("#import").css("display","block");
	 	              $("#left,#right").css("display","none");
	                 },function(){ $("#detaillist").css("display","none");$("#import").css("display","none");
//	                 $("#index_nav_right").css("display","block");
	                 });
 
}
